import React from "react"
import { View, ScrollView, Text } from 'react-native'
import { List, InputItem, Button } from "antd-mobile-rn"
import { postLogin } from "../Services/UserService"
import { saveUser } from "../Util/UserManager"

export default class Login extends React.Component {
    constructor() {
        super()
        this.state = {
            phone: null,
            password: null
        }
    }

    toLogin = async () => {
        const { phone, password } = this.state
        if (!phone || phone.length < 11 || !password || password.length < 4) {
            alert('输入有误！')
        } else {
            const user = await postLogin({ phone, password })
            user && saveUser(user)
            const { navigation } = this.props
            navigation.pop()
        }
    }

    render() {
        const { phone, password } = this.state
        return <ScrollView>
            <Text>请输入账号密码</Text>
            <List>
                <InputItem name='phone' type='number' value={phone} placeholder='手机号'
                    onChange={(phone) => this.setState({ phone })}>
                    手机号
                </InputItem>
                <InputItem name='password' type='password' value={password} placeholder='密码'
                    onChange={(password) => this.setState({ password })}>
                    密码
                </InputItem>
            </List>
            <Button onClick={this.toLogin}>登录</Button>
        </ScrollView>
    }
}